<template>
  <pure-panel-card v-loading="loading" class="max-height">
    <div slot="header">操作记录</div>
    <pure-timeline :reverse="false" class="timeline">
      <pure-timeline-item
        v-for="(item,index) in list"
        :key="index"
        class="timeline-item"
      >
        <i slot="dot" class="pure-dot" />
        <div class="process line-margin">{{ item.operStateToName }}</div>
        <div class="timestamp line-margin">{{ item.createTime }}</div>
        <template v-if="item.operState==='create_order'">
          <div class="item">操作人：<span>{{ item.createUserName }}</span></div>
          <div class="item">建单来源：<span>{{ item.processValue }}</span></div>
        </template>
        <template v-if="item.operState==='allocate'">
          <div class="item">操作人：<span>{{ item.createUserName }}</span></div>
          <div class="item">派单类型<span>{{ item.processValue }}</span></div>
          <div class="item">派单给<span>{{ item.processValue }}</span></div>
        </template>
        <template v-if="item.operState==='hurry'">
          <div class="item">催单人：<span>{{ item.createUserName }}</span></div>
          <div class="item">催单次数：<span>{{ item.processValue }}</span></div>
        </template>
        <template v-if="item.operState==='edit_order'">
          <div class="item">修改人：<span>{{ item.createUserName }}</span></div>
          <div class="item"><pure-button label="查看修改项" /></div>
        </template>
        <template v-if="item.operState==='making'">
          <div class="item">处理人：<span>{{ item.createUserName }}</span></div>
          <div class="item">处理状态：<span>{{ item.makeTypeToName }}</span></div>
        </template>
        <template v-if="item.operState==='examine'">
          <div class="item">审核人：<span>{{ item.createUserName }}</span></div>
          <div class="item">审核结果<span>{{ item.processValue }}</span></div>
        </template>
        <template v-if="item.operState==='appraisal'">
          <div class="item">评价人：<span>{{ item.createUserName }}</span></div>
          <div class="item">评价结果：<span>{{ item.processValue }}</span></div>
        </template>

      </pure-timeline-item>
    </pure-timeline>
    <div v-if="tip" class="tip">{{ tip }}</div>
  </pure-panel-card>
</template>

<script>
import TicketApi from '../../api';
export default {
  name: 'TicketHistoryInfoPanel',
  props: {
    id: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      list: [
      ],
      loading: true,
      tip: '',
    };
  },
  async created() {
    await this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        if (!this.id) {
          return;
        }
        this.list = await TicketApi.processFlow(this.id);
      } catch (error) {
        this.tip = '流程信息获取失败';
      } finally {
        this.loading = false;
      }
    },
  },

};
</script>

<style lang="scss" scoped>
@import "~@/common/styles/theme/handle.scss";

.pure-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid;
  @include border_color_imp('color-text-placeholder');
}
.process {
  font-size: 16px;
  font-weight: bold;
}
.line-margin {
  margin-bottom: 16px;
}
.timeline {
  .timeline-item {
    &:first-child {
      .pure-dot {
         @include border_color_imp('color-primary');
      }
      .process {
        @include font_color_imp('color-primary');
      }
    }
  }
}
.item {
  font-size: 14px;
  @include font_color_imp('color-text-minor');
  &+.item {
    margin-top: 16px;
  }
  span {
    @include font_color_imp('color-assist-gray');
  }
}
</style>
